<template>
  <div v-transfer-dom>
    <popup v-model="showShare" @on-show="toggle(true)" @on-hide="toggle(false)">
      <div class="share-wrapper">
        <p class="title">分享嗨黔东南到</p>
        <div class="share">
          <div class="item" @click="shareToWechat(0)">
            <img :src="iconWechat"/>
            <p>微信好友</p>
          </div>
          <div class="item" @click="shareToWechat(1)">
            <img :src="iconFriend"/>
            <p>朋友圈</p>
          </div>
          <div class="item" @click="shareToWeiBo">
            <img :src="iconWeibo"/>
            <p>新浪微博</p>
          </div>
          <div class="item" @click="shareToQQ(0)">
            <img :src="iconQQ"/>
            <p>QQ好友</p>
          </div>
          <div class="item" @click="shareToQQ(1)">
            <img :src="iconQzone"/>
            <p>QQ空间</p>
          </div>
        </div>
      </div>
    </popup>
  </div>
</template>

<script>
import { TransferDom, Popup } from 'vux'

import iconWechat from '@/assets/img/icon/share_wechat.png'
import iconFriend from '@/assets/img/icon/share_friend.png'
import iconQQ from '@/assets/img/icon/share_qq.png'
import iconQzone from '@/assets/img/icon/share_qzone.png'
import iconWeibo from '@/assets/img/icon/share_weibo.png'
import nativeBridge from '@/assets/js/nativeBridge'

export default {
  model: {
    prop: 'value',
    event: 'toggle'
  },
  props: {
    value: Boolean,
    title: String,
    desc: String,
    thumbUrl: String,
    linkUrl: String
  },
  data () {
    return {
      showShare: this.value,
      iconWechat,
      iconFriend,
      iconQQ,
      iconQzone,
      iconWeibo
    }
  },
  directives: {
    TransferDom
  },
  components: {
    Popup
  },
  methods: {
    shareToWechat (type) {
      this.showShare = false
      nativeBridge.shareToWechat(this, type, this.title, this.desc, this.thumbUrl, this.linkUrl)
    },
    shareToQQ (type) {
      this.showShare = false
      nativeBridge.shareToQQ(this, type, this.title, this.desc, this.thumbUrl, this.linkUrl)
    },
    shareToWeiBo () {
      this.showShare = false
      nativeBridge.shareToWeibo(this, this.title, this.desc, this.thumbUrl, this.linkUrl)
    },
    toggle (val) {
      this.$emit('toggle', val)
    }
  },
  watch: {
    value (val) {
      this.showShare = val
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.share-wrapper {
  background: #fff;
  .title {
    text-align: center;
    padding: 8px;
    color: #666;
  }
  .share {
    display: flex;
    justify-content: space-around;
    padding-bottom: 34px;

    .item {
      text-align: center;
      color: $color-text-dark;
      font-size: 13px;
      padding: 14px 0;
      img {
        width: 36px;
        height: 36px;
        // border-radius: 50%;
      }
    }
  }
}
</style>

